<template>
  <div class="content">
    <a-row v-if="loading">
      <a-col :span='24'>
        <a-skeleton active />
      </a-col>
    </a-row>
    <div v-else>
      <!-- 副标题浮动锚点 -->
      <a-anchor v-if="comActList&&comActList.length" :affix="true" class="anchor">
        <a-anchor-link v-for="(item,index) in comActList" :key="index" :href="'#actCom'+index" :title="item.subtitle" />
      </a-anchor>
      <div v-for="(item,index) in comActList" :key="index" ref="coms" :id="'actCom'+index">
        <a-row>
          <a-col :span='24'>
            <div class="act-item">
              <div class="act-border"></div>
              <div class="act-item-title">{{item.maintitle}}</div>
              <div class="act-item-text" v-html="item.txt"></div>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>
<script>
import '../../assets/css/temp01.css'
export default {
  name: 'PopContent',
  data(){
    return{
      comActList:[],
      loading:true,
      html:''
    }
  },
  methods:{
    init:function(id){
      //获取商家宣传
      let url = `backstage/getPage3Info.do?id=${id}`,vo = this;
      vo.ajax.get(url).then(res=>{
          let data = res.data;
          vo.comActList = data.comActList;
          vo.loading = false;
      })
    },
    handleScroll(){
      let vo = this,top=3000,ctop = document.body.clientHeight,dom = vo.$refs.coms;
   
      if (dom&&dom.length) {
        top = dom[1].getBoundingClientRect().top;
      }
      console.log(ctop,top)
      if (ctop > top) {
        if(!vo.$store.state.isPet){
          vo.$store.commit('onmoney', {//弹红包
            money:true
          })
        }
        // else{
        //   vo.$store.commit('oncoupon', {//弹券
        //     coupon:true
        //   })
        // }
        vo.isFixed = true;
        vo.removeHandleScroll();
      }
    },
    removeHandleScroll(){
      window.onscroll = null;
    }
  },
  mounted(){
    let o = this.$route.query;
    if(Object.keys(o).length>0){
      this.init(o.id);
      let vo = this,
      url = `backstage/queryDiscount.do?id=${o.id}`;
      vo.ajax
      .get(url)
      .then(res => {
        if(res.data.discountList){
          vo.$store.commit('onpet', {//设定已领
            isPet:true
          })
        }else if(res.data.discount){
          vo.$store.commit('onpet', {//设定没领
            isPet:false
          })
        }
      });
    }
    
    window.onscroll = this.handleScroll.bind(this)
  },
  beforeDestroy(){
    this.removeHandleScroll();
  }
}
</script>
<style lang='less' scoped>
/deep/.anchor{
  width: 80px;
  height: 0!important;
  .ant-affix{
  border-radius: 9px;
  overflow: hidden;
  text-align: left;
  }
  .ant-anchor-wrapper{
    background: rgba(0,0,0,0.8);
    padding-bottom: 10px;
    a{
      color:#fff;
    }
  }
  .ant-anchor-ink:before{
    display: none;
  }
  .ant-anchor-ink-ball{
    border-color: #fff;
  }
}

</style>
